import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(const MaterialApp(
    home: WaterfallPage(),
  ));
}

/// 宽度断点，根据原生断点表
enum WidthBreakpoint { xs, sm, md, lg, xl }

/// 高度断点，根据原生断点表
enum HeightBreakpoint { sm, md, lg }

class ResponsiveBreakpoints {
  static WidthBreakpoint widthOf(double width) {
    if (width < 320) {
      return WidthBreakpoint.xs;
    } else if (width < 600) {
      return WidthBreakpoint.sm;
    } else if (width < 840) {
      return WidthBreakpoint.md;
    } else if (width < 1440) {
      return WidthBreakpoint.lg;
    } else {
      return WidthBreakpoint.xl;
    }
  }

  static HeightBreakpoint heightOf({
    required double width,
    required double height,
  }) {
    if (width == 0) return HeightBreakpoint.md;
    final ratio = height / width;
    if (ratio < 0.8) {
      return HeightBreakpoint.sm;
    } else if (ratio < 1.2) {
      return HeightBreakpoint.md;
    } else {
      return HeightBreakpoint.lg;
    }
  }

  static WidthBreakpoint widthFromContext(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return widthOf(width);
  }

  static HeightBreakpoint heightFromContext(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return heightOf(width: size.width, height: size.height);
  }
}

class WaterfallPage extends StatelessWidget {
  const WaterfallPage({super.key});

  @override
  Widget build(BuildContext context) {
    final random = Random();
    final items = List.generate(
      50,
      (index) => _WaterfallItem(
          index: index,
          color: Colors.primaries[index % Colors.primaries.length],
          height: 80.0 + random.nextInt(120)),
    );

    return Scaffold(
      appBar: AppBar(
        title: const Text('瀑布流'),
      ),
      body: LayoutBuilder(
        builder: (context, constraints) {
          final width = constraints.maxWidth;
          final height = constraints.maxHeight;
          final widthBp = ResponsiveBreakpoints.widthOf(width);
          final heightBp =
              ResponsiveBreakpoints.heightOf(width: width, height: height);
          final crossAxisCount = _getCrossAxisCount(widthBp, heightBp);
          return MasonryGridView.count(
            padding: const EdgeInsets.all(8),
            crossAxisCount: crossAxisCount,
            mainAxisSpacing: 8,
            crossAxisSpacing: 8,
            itemCount: items.length,
            itemBuilder: (context, index) {
              final item = items[index];
              return _WaterfallCard(item: item);
            },
          );
        },
      ),
    );
  }

  int _getCrossAxisCount(
    WidthBreakpoint widthBp,
    HeightBreakpoint heightBp,
  ) {
    switch (widthBp) {
      case WidthBreakpoint.xs:
        return 1;
      case WidthBreakpoint.sm:
        return 2;
      case WidthBreakpoint.md:
        return 3;
      case WidthBreakpoint.lg:
        return heightBp == HeightBreakpoint.sm ? 4 : 3;
      case WidthBreakpoint.xl:
        return 4;
    }
  }
}

class _WaterfallItem {
  final int index;
  final Color color;
  final double height;

  _WaterfallItem({
    required this.index,
    required this.color,
    required this.height,
  });
}

class _WaterfallCard extends StatelessWidget {
  final _WaterfallItem item;

  const _WaterfallCard({super.key, required this.item});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: item.height,
      decoration: BoxDecoration(
        color: item.color.withOpacity(0.8),
        // 跟随原生demo的颜色
        // color: const Color(0xFFF1F3F5),
        borderRadius: BorderRadius.circular(12),
      ),
    );
  }
}
